<template>
  <aside class="ad">
    <a :href="data.linkUrl">
      <img :src="$api.preview(data.url)" alt="" v-if="data.url">
    </a>
  </aside>
</template>

<script>
export default {
  name: "Advice",
  props: {
     data: {type: Object, required: true}
  }
}
</script>

<style scoped>
.aside .ad {
  text-align: center;
  padding: 20px 0;
}

.aside .ad img {
  width: 300px;
  height: 250px;
}

.aside .ad::before {
  content: '广告';
  position: absolute;
  top: 22px;
  right: 22px;
  border: 1px solid #fff;
  padding: 2px 25px 2px 5px;
  font-size:12px;
  color: #fff;
  border-radius: 2px;
  background: url(../assets/images/close-ad.png) no-repeat right 0 / contain;
  cursor: pointer;
}
</style>